<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            /* 可见区域的高度 */
            --height:40px;
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
        }
        .nav{
            display: grid;
            width: 70%;
            gap:30px;
            grid-template-columns: repeat(5,1fr);
        }
        .nav_item{
            display: flex;
            gap:10px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .nav_item>div{
            display: flex;
        }
        .content{
            display: flex;
            gap:5px;
        }
        .content>div{
            display: flex;
            flex-direction: column;
            height: var(--height);
            overflow: hidden;
        }
        div>span{
            height: 100%;
            background: linear-gradient(to right bottom, #0056D2 100%,white);
            background-clip: text;
            color:transparent;
            transition: all 2s;
            font-size: 30px;
            font-weight: 600;
        }
        .other{
            background: linear-gradient(to right bottom,#0056D2 100%,white);
            background-clip: text;
            color:transparent;
            transition: all 1s;
            font-size: 30px;
            font-weight: 600;
            height: var(--height);
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav_item">
            <div><div class="content"></div><span class="other">.</span><div class="content"></div><span class="other">+</span></div>
            <b style="color:#333333">Published Works</b>
        </div>
        <div class="nav_item">
            <div><div class="content"></div><span class="other">.</span><div class="content"></div><span class="other">+</span></div>
            <b style="color:#333333">Partner Institutions</b>
        </div>
        <div class="nav_item">
            <div><div class="content"></div><span class="other">Million</span><span class="other">+</span></div>
            <b style="color:#333333">Conference Audience</b>
        </div>
        <div class="nav_item">
            <div><div class="content"></div><span class="other">.</span><div class="content"></div><span class="other">.</span><div class="content"></div><span class="other">+</span></div>
            <b style="color:#333333">Researcher Clients</b>
        </div>
        <div class="nav_item">
            <div><div class="content"></div><span class="other">.</span><div class="content"></div><span class="other">+</span></div>
            <b style="color:#333333">Global Experts</b>
        </div>
    </div>
</body>
</html>

<script>
    let mathdata = [[1,0,0,0],[0,0,0],
                    [2],[0,0,0],
                    [1,0,0],
                    [1],[8,0,0],[0,0,0],
                    [3,3],[0,0,0]]
    mathAnimation(mathdata,function(e){
        for (const key in e) {
            document.querySelectorAll(".content")[key].innerHTML = e[key]
        }
    })

    function mathAnimation(mathdata,callback){
        let arr = []
        mathdata.forEach((item,index)=>{
            let str = ""
            item.forEach((item1,index1)=>{
                let items = item1 // 9
                let itemss = item1 // 9
                str += "<div>"
                    itemss == 0 ? items = 1 : items
                    for(let i = 0;i<items + 1;i++){
                        str += `<span>${ itemss == 0 ? itemss : i }</span>`
                    }
                str += "</div>"
            })
            arr.push(str)
        })

        callback(arr)

        requestAnimationFrame(function(){
            document.querySelectorAll(".content").forEach((item,index)=>{
                Array.from(item.children).forEach((item1,index1)=>{
                    console.log(mathdata[index][index1])
                    Array.from(item1.children).forEach((item2,index2)=>{
                        item2.style = `transform: translateY(calc(-100% * ${ mathdata[index][index1] == 0 ? mathdata[index][index1] + 1 : mathdata[index][index1] }))`
                    })
                })
                
            })
        })
    }
</script>